<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
	
	<script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>          
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
	
	<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
	<div id="app">

		<div id="class_table" v-if="emty">
			
			<table class="layui-table">
			  <colgroup>
			    <col width="150">
			    <col width="200">
			    <col>
			  </colgroup>
			  <thead>
			    <tr>
			      <th>id</th>
			      <th>班级</th>
			      <th>人数</th>
				  <th>修改</tr> 
			  </thead>
			  
			  <thead v-for="(item , index) in classS">
			    <tr>
				  <th>{{item.id}}</th>
			      <th>{{item.name}}</th>
			      <th>{{item.count}}</th>
				  <th><button type="button" class="layui-btn layui-btn-primary">修改</button></th>
			    </tr> 
			  </thead>
			  {{classS.length}}
			</table>
			
		</div>
		
		
	</div>
	
	<script type="text/javascript">
		var vuess =new Vue({
			el:'#app',
			data:{
				classS:[],
				user:{
					id:-1,
					uname:'',
					name:'',
					birthday:'',
					age:'',
					sex:'1'
				},
				emty:false
				},
		methods:{

			
			//向服务器发送获取班级请求
			getClass(){
	
				axios.get('http://localhost:8080/getTeacherClass.acction', {
				    params: {
				      id:this.user.id
				    }
				  })
				  .then(function (response) {
	
				    this.classS=response.data
	                  console.log(this.classS)
				  })
			this.emty=true
			console.log(this.emty)
			},
			getUser(){
				//加载完成时，获取当前登录用户
				 axios
				 .get('http://localhost:8080/judgeLogin.action')
				 .then(res=>{
	
					 this.user=res.data
					 if(res.data.sex=='男')
					 {
						 this.user.sex='1'
					 }
					 else  if(res.data.sex=='女')
					 {
						 this.user.sex='2'
					 }
					 this.getClass()
					
				 })
			}
			
		
		},
		
		mounted:function(){
			
			this.getUser()
			
		}
		
		})
	
	
	
	</script>
    





</body>
</html>